<template>
  <div class="blog-detail">
    <h1>{{ blogTitle }}</h1>
    <p>{{ blogCotent }}</p>
    <NuxtLink to="/blog">回到博客首页</NuxtLink>
  </div>
</template>

<script setup>
const blogTitle = ref("");
const blogContent = ref("");
const route = useRoute();

const blogData = {
  post1: {
    title: "博客 1 标题",
    content: "这是博客 1 的内容。",
  },
  post2: {
    title: "博客 2 标题",
    content: "这是博客 2 的内容。",
  },
  post3: {
    title: "博客 3 标题",
    content: "这是博客 3 的内容。",
  },
};

const loadBlog = () => {
  const id = route.params.id;
  if (blogData[id]) {
    blogTitle.value = blogData[id].title;
    blogContent.value = blogData[id].content;
  } else {
    blogTitle.value = "文章不存在";
    blogContent.value = "你要找的文章去火星了～";
  }
};

watch(
  () => route.params.id,
  () => {
    loadBlog();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped>
.blog-detail {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 28px;
  color: #333;
}

p {
  margin: 20px 0;
  font-size: 18px;
  color: #555;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
